<!--

  $Id: all.html,v 1.11 2006/05/25 10:47:00 justb Exp $
  author: Just van den Broecke

-->
<html>
<head>
    <title>All Event</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="Pragma" content="no-cache">
   <style type="text/css">
    @import "../dojo1.7/dijit/themes/nihilo/nihilo.css";
    @import "../dojo1.7/dojo/resources/dojo.css"
  </style>
    <script type="text/javascript" src="../dojo1.7/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
   <script type="text/javascript" src="../js/js-pushlet-client.js"></script>

     <script type="text/javascript">
     dojo.require("dojox.gauges.AnalogGauge");
     dojo.require("dojox.gauges.AnalogArcIndicator");
     dojo.require("dojox.gauges.AnalogNeedleIndicator");
     var gaugeUser,gaugeSys,indSys,indUser;
     dojo.ready(function(){
         gaugeUser = dijit.byId('cpu_user');
         // Used for a gradient arc indicator below:
         indUser=new dojox.gauges.AnalogNeedleIndicator({
             'value': 100,
             'width': 8,
             'length': 100,
             'color': 'red',
             'title': 'Needle',
             'hover': 'Needle: 100'
           });
         var fill = {
           'type': 'linear',
           'x1': 50,
           'y1': 50,
           'x2': 350,
           'y2': 350,
           'colors': [{offset: 0, color: 'black'}, {offset: 0.5, color: 'black'}, {offset: 0.75, color: 'yellow'}, {offset: 1, color: 'red'}]
         };
         gaugeUser.addIndicator(new dojox.gauges.AnalogArcIndicator({
           'value': 100,
           'width': 20,
           'offset': 150,
           'color': fill,
           'noChange': true,
           'hideValues': true
         }));
         gaugeUser.addIndicator(new dojox.gauges.AnalogArcIndicator({
             'value': 100,
             'width': 10,
             'offset': 150,
             'color': 'red'
           }));
         gaugeUser.addIndicator(new dojox.gauges.AnalogArcIndicator({
             'value': 70,
             'width': 10,
             'offset': 150,
             'color': 'yellow'
           }));
         gaugeUser.addIndicator(new dojox.gauges.AnalogArcIndicator({
           'value': 40,
           'width': 10,
           'offset': 150,
           'color': 'green',
         }));
         gaugeUser.addIndicator(indUser);
         /////////////////////////////////
         gaugeSys = dijit.byId('cpu_sys');
         // Used for a gradient arc indicator below:
         indSys=new dojox.gauges.AnalogNeedleIndicator({
             'value': 100,
             'width': 8,
             'length': 100,
             'color': 'red',
             'title': 'Needle',
             'hover': 'Needle: 100'
           });
         var fill = {
           'type': 'linear',
           'x1': 50,
           'y1': 50,
           'x2': 350,
           'y2': 350,
           'colors': [{offset: 0, color: 'black'}, {offset: 0.5, color: 'black'}, {offset: 0.75, color: 'yellow'}, {offset: 1, color: 'red'}]
         };
         gaugeSys.addIndicator(new dojox.gauges.AnalogArcIndicator({
           'value': 100,
           'width': 20,
           'offset': 150,
           'color': fill,
           'noChange': true,
           'hideValues': true
         }));
         gaugeSys.addIndicator(new dojox.gauges.AnalogArcIndicator({
           'value': 80,
           'width': 10,
           'offset': 150,
           'color': 'blue',
           'title': 'Arc',
           'hover': 'Arc: 80'
         }));
         gaugeSys.addIndicator(indSys);
     });
       	// Initialization
		function init() {
			p_join_listen('/sys/monitor');
  		}

		// Event Callback: display all events
		function onEvent(event) {
	  		// p_debug(flag, "pushlet-app", 'event received subject=' + event.getSubject() );
			indUser.value=event.get("cpu_user");
			gaugeUser.draw();
			indSys.value=event.get("cpu_sys");
			gaugeSys.draw();
		}
	</script>

</head>
<body bgcolor="#cccccc" onLoad="init()">

<script type="text/javascript">p_embed()</script>

<h4>Event Monitor</h4>
<div style="float:left">用户cpu使用:</div><div style="float:left">系统cpu使用:</div>
<div style="float:left" data-dojo-type="dojox.gauges.AnalogGauge"
  id='cpu_user'
  width="450"
  height="300"
  cx="225"
  cy="175"
  radius="150"
  startAngle="-135"
  endAngle="135"
  useRangeStyles="0"
  hideValues="true"
  color: "white"
  majorTicks="{length: 10, offset: 105, interval: 10, color: 'gray'}"
  minorTicks="{length: 5, offset: 105, interval: 5, color: 'gray'}">
  <div data-dojo-type="dojox.gauges.Range"
    low="0"
    high="50"
    color="{'color': 'black'}">
  </div>
  <div data-dojo-type="dojox.gauges.Range"
    low="50"
    high="100"
    color="{'color': 'black'}">
  </div>
</div>

<!-- /////////////////////////////////////// -->

<div style="float:left" data-dojo-type="dojox.gauges.AnalogGauge"
  id='cpu_sys'
  width="450"
  height="300"
  cx="225"
  cy="175"
  radius="150"
  startAngle="-135"
  endAngle="135"
  useRangeStyles="0"
  hideValues="true"
  color: "white"
  majorTicks="{length: 10, offset: 105, interval: 10, color: 'gray'}"
  minorTicks="{length: 5, offset: 105, interval: 5, color: 'gray'}">
  <div data-dojo-type="dojox.gauges.Range"
    low="0"
    high="50"
    color="{'color': 'black'}">
  </div>
  <div data-dojo-type="dojox.gauges.Range"
    low="50"
    high="100"
    color="{'color': 'black'}">
  </div>
</div>
</body>
</html>

